<template>
    <el-form-item :label="label">
        <VueDraggable v-model="value" style="width:100%">
            <el-row v-for="(data,index) in value" :gutter="10">
                <el-col  v-for="item in options" :key="item.Param" :span="8">
                    <component :is="components[item.Control.Type]" v-model="data[item.Param]" :label="item.ParamCN||''" v-bind="item.Control.Bind"/>
                </el-col>
                <el-col :span="8">
                    <el-button :icon="Rank" circle/>
                    <el-button type="danger" :icon="Delete" circle plain @click="value?.splice(index,1)"/>
                </el-col>
            </el-row>
        </VueDraggable>
        <el-row>
            <el-link type="primary" @click="value?.push(getDef())">添加</el-link>
        </el-row>
    </el-form-item>
</template>
<script setup lang="ts">
import {Rank,Delete} from '@element-plus/icons-vue'
import type {attrsType} from '../types'
import components from './index'
const value = defineModel<{[key:string]:any}[]>()
const {label,options} = defineProps<{
    label:string
    options:attrsType[]
}>()


const defaults = options.reduce((a,b)=>{
    if(b.Value!=null)a[b.Param] = b.Value;
    return a;
},{})
if(!value.value||
!Array.isArray(value.value)||
(Array.isArray(value.value)&&value.value[0]&&Object.keys(value.value[0]).length==0)
)value.value = [getDef()];

/**获取默认值 */
function getDef(){
    return JSON.parse(JSON.stringify(defaults))
}
</script>
<style scoped>
.el-col{
    margin-bottom: 10px;
}
.el-link{
    font-size: 12px;
    margin-left: 2px;
}
</style>